<template>
  <div class="box">
    <div class="left">
      <el-select v-model="value" placeholder="请选择" @change="result(value)">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 内容显示 -->
    <div class="right">
    <div class="block">
      <el-cascader
        placeholder="请输入搜索的内容"
        :options="FilterList"
        filterable
        :show-all-levels="false"
        :props="FilterProps"
        @change="result2"
        clearable
        v-model="nowSelect"
        class="search"
      ></el-cascader>
        <!-- <el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading">
          <el-option
            v-for="item in KeySelect"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->
    </div>
    <br>
    <div class="exhibition">
      <el-table id="table" :data="tableData" border style="width: 100%">
        <el-table-column
          fixed
          prop="name"
          :label="`${this.value}名称`"      
        >
        </el-table-column>
        <el-table-column
          prop="introduce"
          :label="`${this.value}介绍`"
        >
        </el-table-column>
        <template v-if="this.value == '项目'">
          <el-table-column prop="content" label="项目内容">
          </el-table-column>
          <el-table-column prop="require" label="项目要求">
          </el-table-column>
          <!-- <el-table-column
            prop="time"
            label="预期时间"
            width="100">
          </el-table-column> -->
          <el-table-column prop="type" label="项目分类">
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" >
          <template slot-scope="scope">
            <alter-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</alter-button
            >
            <alter-button
              @click.native.prevent="
                deleteRow(scope.$index, scope.row), Show(), open()
              "
              type="text"
              size="small"
              >删除
            </alter-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
    <!-- 修改表单 -->
    <div class="editBackground" v-show="editShow">
      <div class="editTable">
        <f-form
          ref="form"
          :model="sizeForm"
          label-width="80px"
          size="medium"
          class="editForm"
          @submit.native.prevent
        >
          <form-item :label="`${this.value}名称`" prop="name">
            <form-input v-model="sizeForm.name" name="name"></form-input>
          </form-item>
          <form-item :label="`${this.value}介绍`" prop="introduce">
            <form-input
              type="textarea"
              v-model="sizeForm.introduce"
              name="introduce"
            ></form-input>
          </form-item>
          <div v-if="this.value == '项目'">
            <form-item label="项目内容" prop="content">
              <form-input
                type="textarea"
                v-model="sizeForm.content"
                name="content"
                :disabled="true"
              ></form-input>
            </form-item>
            <form-item label="项目要求" prop="require">
              <form-input
                type="textarea"
                v-model="sizeForm.require"
                name="require"
              ></form-input>
            </form-item>
            <!-- <form-item label="预期时间" prop="time"> 
                <form-input v-model="sizeForm.time" name="time"></form-input>
              </form-item> -->
            <form-item label="项目分类">
              <form-radio-group v-model="sizeForm.type" size="small">
                <msg-radio border label="小型项目" name="type"></msg-radio>
                <msg-radio border label="中型项目" name="type"></msg-radio>
                <msg-radio border label="大型项目" name="type"></msg-radio>
              </form-radio-group>
            </form-item>
          </div>
          <form-item size="large">
            <alter-button type="primary" @click="onSubmit(), Show()"
              >修改</alter-button
            >
            <alter-button @click="cancle">取消</alter-button>
          </form-item>
        </f-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";
import { mapMutations } from "vuex";

export default {
  name: "ObjectModify",
  created() {
    // 一进来就调用 result() 方法展示学科内容
    this.result();
  },
  watch:{
    //监听搜索内容是否为空，如果为空则重新访问数据库
    nowSelect(){
      if(this.nowSelect == ""){
        this.result()
      }
    }
  },
  methods: {
    // 删除按钮
    // 删除判断
    open() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ExecuteDelete();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.PageRefresh()
        });
    },
    // 获取删除的对象对应的id、名字等
    deleteRow(index, rows) {
      // console.log(index,rows);
      //解决中文乱码
      // console.log(window.decodeURIComponent(rows.name));
      this.subjectName = rows.name;
      this.stageId = rows.stageId;
      this.projectId = rows.projectId;
    },
    //执行删除操作
    ExecuteDelete() {
      if (this.value == "学科") {
        axios
          .get(
            `http://124.71.219.15:8083//management_system/subject/delete?name=${window.decodeURIComponent(
              this.subjectName
            )}`
          )
          .then((response) => {
            if (response.data.flag) {
              this.editShow = false;
              this.PageRefresh();
              this.open3();
            } else {
              this.open5();
            }
          });
      } else if (this.value == "阶段") {
        // console.log(rows.stageId);
        axios
          .get(
            `http://124.71.219.15:8083//management_system/stage/delete?stageId=${this.stageId}`
          )
          .then((response) => {
            if (response.data.flag) {
              // alert('删除成功')
              this.editShow = false;
              this.PageRefresh();
              this.open3();
            } else {
              this.open5();
            }
          });
      } else {
        // alert(rows.projectId);
        axios
          .get(
            `http://124.71.219.15:8083//management_system/project/delete?projectId=${this.projectId}`
          )
          .then((response) => {
            if (response.data.flag) {
              // alert('删除成功')
              this.editShow = false;
              this.PageRefresh();
              this.open3();
            } else {
              this.open5();
            }
          });
      }
    },
    // 编辑按钮
    handleEdit(index, rows) {
      this.editShow = true;
      this.sizeForm.name = rows.name;
      this.sizeForm.introduce = rows.introduce;
      this.sizeForm.content = rows.content;
      this.sizeForm.require = rows.require;
      // this.sizeForm.time = rows.time
      this.sizeForm.type = rows.type;
      if (this.value == "学科") {
        this.currentId = rows.subjectId;
      } else if (this.value == "阶段") {
        this.currentId = rows.stageId;
      } else {
        this.currentId = rows.projectId;
      }
      // console.log(index,rows);
    },
    // 左边联机框选择对应类别的右边显示对应内容
    result(value) {
      this.nowSelect = ""
      axios
        .post(
          `http://124.71.219.15:8083//management_system/subject/selectAllSubject`
        )
        .then((response) => {
          // console.log(response.data);
          if (response.data.flag) {
            // console.log('请求成功');
            if (this.value === "学科") {
              // console.log(response.data.data);
              this.FilterProps.value = "subjectId"
              this.FilterProps.children = null
              this.tableData = this.FilterList = response.data.data;
            } else if (this.value === "阶段") {
              // console.log(response.data.data);
              this.FilterProps.value = "subjectId"
              this.FilterProps.children = null
              this.FilterList = response.data.data
              this.tableData = [];
              response.data.data.forEach((element) => {
                this.tableData = this.tableData.concat(element.stageList);
                // console.log(element.stageList);
              });
            } else {
              //配置练级框内容
              let copy = response.data.data
              copy = JSON.parse(JSON.stringify(copy).replace(/customspassList/g, 'stageList'))
              this.FilterProps.value = "customspassId"
              this.FilterProps.children = "stageList"
              this.FilterList = copy
              this.tableData = [];
              response.data.data.forEach((element) => {
                element.stageList.forEach((el) => {
                  el.customspassList.forEach((e) => {
                    if (e.projectList !== null) {
                      this.tableData = this.tableData.concat(e.projectList);
                    }
                  });
                });
              });
              // console.log(this.tableData);
            }
          } else {
            console.log("请求失败");
          }
        });
      // 如果是项目就展示项目内容
      if (value == "项目") {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    // 筛选后右边对应内容显示
    result2(v){
      if(this.value == '学科'|this.value == '阶段'){
        axios.get(`http://124.71.219.15:8083//management_system/subject/selectBySubjectId?subjectId=${v}`)
        .then((response) => {
          if(response.data.flag){
            if(this.value == '学科'){
               this.tableData = []
               //结果为对象所以要用 push 到数组中
               this.tableData.push(response.data.data)
            }else{
              //结果为数组，所以直接赋值即可
              this.tableData = response.data.data.stageList
            }
            
          }
        })
      }else{
        axios.post(`http://124.71.219.15:8083//management_system/project/selectByCustomspassId?customspassId=${v[2]}`)
        .then((response)=>{
          if(response.data.flag){
            this.tableData = response.data.data
            // console.log(response.data.data);
          }
        })
      }
    },
    // 修改成功弹框提示
    open2() {
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    // 删除成功弹框提示
    open3() {
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    // 表单不能为空
    open4() {
      this.$message({
        message: "不能为空！",
        type: "error",
      });
    },
    // 删除失败
    open5() {
      this.$message({
        message: "删除失败！",
        type: "error",
      });
    },
    // 页面刷新
    ...mapMutations("Refresh", { Show: "Show" }),
    PageRefresh() {
      this.$nextTick(function () {
        this.$store.state.Refresh.isRouterAlive = true;
         this.result('阶段');
      });
    },
    //修改表单提交
    onSubmit() {
      var params = $(".editForm").serializeArray();
      let array = {};
      if (this.value == "学科") {
        array.subjectId = this.currentId;
      } else if (this.value == "阶段") {
        array.stageId = this.currentId;
      } else if (this.value == "项目") {
        array.projectId = this.currentId;
      }
      //判断表单不能为空，且获取到数据
      params.forEach((element) => {
        if (element.value == "") {
          this.ifRequest = false;
          this.open4();
          this.PageRefresh();
        } else {
          // 把表单中获取到的值转化为对象形式
          array[element.name] = element.value;
        }
      });
      //把对象转换为 jsonp 格式
      if (this.ifRequest) {
        array = JSON.stringify(array);
        // console.log(array);
        // 进行修改操作
        if (this.value == "学科") {
          axios({
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            url: "http://124.71.219.15:8083//management_system/subject/update",
            data: array,
          }).then((response) => {
            if (response.data.flag) {
              this.editShow = false;
              this.PageRefresh();
              this.open2();
            } else {
              alert(response.data.errorMsg);
            }
          });
        } else if (this.value == "阶段") {
          // console.log(array);
          axios({
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            url: "http://124.71.219.15:8083//management_system/stage/update",
            data: array,
          }).then((response) => {
            // console.log(response.data);
            if (response.data.flag) {
              this.editShow = false;
              this.PageRefresh();
              this.open2();
            } else {
              alert(response.data.errorMsg);
            }
          });
        } else {
          // console.log(array);
          axios({
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            url: "http://124.71.219.15:8083//management_system/project/update",
            data: array,
          }).then((response) => {
            if (response.data.flag) {
              this.editShow = false;
              this.PageRefresh();
              this.open2();
            } else {
              alert(response.data.errorMsg);
            }
          });
        }
       
      }
    },
    // 修改表单隐藏
    cancle() {
      this.editShow = false;
    },
  },
  data() {
    return {
      //搜索框内容
      options: [
        {
          value: "学科",
          label: "学科",
        },
        {
          value: "阶段",
          label: "阶段",
        },
        {
          value: "项目",
          label: "项目",
        },
      ],
      value: "学科",
      // 项目条件是否显示
      isShow: true,
      //显示搜索框内容
      tableData: [],
      //修改表单中的内容
      sizeForm: {
        name: "",
        region: "",
        time: "",
        require: "",
        delivery: false,
        type: [],
        content: "",
        introduce: "",
      },
      // 修改表单是否显示
      editShow: false,
      //当前 id
      currentId: "",
      ifRequest: true,
      //筛选列表
      FilterList:[],
      FilterProps:{
        value:"subjectId",
        label:"name",
        children:null
      },
      nowSelect:null
    };
  },
};
</script>

<style scoped>
.box {
  display: flex;
}
.left {
  width: 300px;
  min-height: 590px;
  border-right: 2px solid #ccc;
}
.left /deep/.el-select {
  margin: 10px 36px;
  border-radius: 10px;
}
/* 右边内容显示区域样式 */
.exhibition {
      min-width: 456px; 
   }
.right {
  flex: 1;
  /* display: flex; */
  /* flex-wrap: wrap; */
  padding-left: 60px;
  padding-bottom: 10px;
}
/* 两个搜索框样式 */
.block {
  height: 50px;
  /* background-color: pink; */
  box-sizing: border-box;
  padding: 10px 0;
}
/* 级联搜索框样式 */
.search {
  margin-right: 20px;
}
 /* 显示的表单样式 */
.exhibition /deep/.table_fixed .el-table__fixed-right {
  height: 100% !important; 
}
.exhibition /deep/#table {
  /* margin-left: 60px; */
  max-height: 800px !important;
}
.exhibition /deep/#table .el-table__body-wrapper {
  max-height: 800px !important;
}
.exhibition /deep/#table .el-table__fixed-body-wrapper {
  /* max-height: 800px !important; */
  height: 100% !important;
  pointer-events:all
}
/* 修改表单 */
.editBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.5);
}
.editTable {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 588px;
  max-height: 512px;
  padding: 10px 67px;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 99;
}
.editTable /deep/.el-input {
  width: 40%;
}
.editTable /deep/.el-textarea {
  width: 65%;
}
</style>